<template>
  <div class="p-6 max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">UI 组件测试页</h1>

    <!-- Toast 测试区 -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">🍞 Toast 测试</h2>
      <div class="flex flex-wrap gap-3">
        <button class="btn btn-success" @click="testToast('success')">成功 Toast</button>
        <button class="btn btn-error" @click="testToast('error')">错误 Toast</button>
        <button class="btn btn-warning" @click="testToast('warning')">警告 Toast</button>
        <button class="btn btn-info" @click="testToast('info')">信息 Toast</button>
        <button class="btn" @click="testLongToast">长时 Toast (10s)</button>
      </div>
    </div>

    <!-- MessageBox 测试区 -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">🪟 MessageBox 测试</h2>

      <div class="space-y-3">
        <button class="btn btn-primary w-full" @click="testOk">✅ 仅“确定”按钮</button>
        <button class="btn btn-secondary w-full" @click="testYesNo">
          ❓ “是/否”按钮（禁止外部关闭）
        </button>
        <button class="btn btn-accent w-full" @click="testOkCancel">🔄 “确认/取消”按钮</button>
        <button class="btn btn-warning w-full" @click="testAbortRetryIgnore">
          ⚠️ “中止/重试/忽略”按钮（禁止外部关闭）
        </button>
        <button class="btn btn-info w-full" @click="testYesNoCancel">📋 “是/否/取消”按钮</button>
      </div>
    </div>

    <!-- 队列压力测试 -->
    <div class="mb-8">
      <h2 class="text-xl font-semibold mb-3">⏱️ 队列压力测试</h2>
      <button class="btn btn-error w-full" @click="testQueue">
        🔥 连续弹出 5 个 MessageBox（测试队列）
      </button>
    </div>

    <!-- 当前 Toast 列表（调试用） -->
    <div v-if="toasts.length" class="mt-8 p-4 bg-base-200 rounded-lg">
      <h3 class="font-bold mb-2">当前活跃 Toast：</h3>
      <div v-for="toast in toasts" :key="toast.id" class="mb-1">
        [{{ toast.type }}] {{ toast.message }} (ID: {{ toast.id }})
      </div>
    </div>

    <!-- 当前 MessageBox（调试用）  -->
    <div v-if="currentMessageBox" class="mt-8 p-4 bg-base-200 rounded-lg">
      <h3 class="font-bold mb-2">当前 MessageBox：</h3>
      <div>
        {{ currentMessageBox.options }}
      </div>
    </div>

    <!-- MessageBox 队列（调试用） -->
    <div v-if="messageBoxQueue.length" class="mt-8 p-4 bg-base-200 rounded-lg">
      <h3 class="font-bold mb-2">MessageBox 队列：</h3>
      <div v-for="(item, index) in messageBoxQueue" :key="index">
        {{ item.options }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'TestPage',
})

// 获取当前 Toast 列表用于调试
const uiStore = useUIStore()
const { toasts, messageBoxQueue, currentMessageBox } = storeToRefs(uiStore)

// === Toast 测试 ===
const testToast = (type: 'success' | 'error' | 'warning' | 'info') => {
  showToast(`这是一条${type}消息`, type)
}

const testLongToast = () => {
  showToast('这是一条持续 10 秒的 Toast', 'info', 10000)
}

// === MessageBox 测试 ===
const testOk = async () => {
  const result = await showMessageBox('操作已完成！', 'success', 'ok', '成功')
  console.log('✅ MessageBox Result:', result)
}

const testYesNo = async () => {
  const result = await showMessageBox(
    '你确定要执行此操作吗？此操作不可逆！',
    'warning',
    'yes-no',
    '重要确认',
    1, // 默认聚焦“否”
  )
  console.log('❓ MessageBox Result:', result)
}

const testOkCancel = async () => {
  const result = await showMessageBox(
    '是否保存当前更改？',
    'info',
    'ok-cancel',
    '保存确认',
    0, // 默认聚焦“确认”
  )
  console.log('🔄 MessageBox Result:', result)
}

const testAbortRetryIgnore = async () => {
  const result = await showMessageBox(
    '程序遇到未知错误，如何处理？',
    'error',
    'abort-retry-ignore',
    '错误处理',
    1, // 默认聚焦“重试”
  )
  console.log('⚠️ MessageBox Result:', result)
}

const testYesNoCancel = async () => {
  const result = await showMessageBox(
    '是否应用新设置？你可以稍后再决定。',
    'info',
    'yes-no-cancel',
    '设置确认',
    2, // 默认聚焦“取消”
  )
  console.log('📋 MessageBox Result:', result)
}

// === 队列测试 ===
const testQueue = async () => {
  // 模拟快速连续调用，应排队依次弹出
  showMessageBox('第一个消息', 'info', 'ok', '队列测试 1')
  showMessageBox('第二个消息', 'warning', 'yes-no', '队列测试 2')
  showMessageBox('第三个消息', 'error', 'ok-cancel', '队列测试 3')
  showMessageBox('第四个消息', 'success', 'yes-no-cancel', '队列测试 4')
  showMessageBox('第五个消息', 'info', 'abort-retry-ignore', '队列测试 5')

  // 这里故意不 await 来测试队列机制
  console.log('🚀 已加入 5 个 MessageBox 到队列')
}
</script>
